<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- 自定义组件 单标签 -->
    <Fx />
  </div>

  <!-- 定义一个组件所用的模板 -->
  <!-- script标签中 type指定类型，不指定认为是js -->
  <script type="text/x-template" id="fx">
    <div>
      <div>{{ username }}</div>
      <h3>你好世界</h3>
    </div>
  </script>

  <script src="./js/vue.js"></script>
  <script>
    // 全局组件
    /* Vue.component('Fx', {
      // 字符串模板定义
      // 定义的组件必须且只有一个根元素
      // template: '<div>\
      //           <div>我也能换行</div>\
      //           <h3>bbb</h3>\
      //           </div>' 
      template: `<div>
                <div>我也能换行</div>
                <h3>bbb</h3>
                </div>`
    }) */

    /* Vue.component('Fx', {
      // 字符串模板定义
      // 定义的组件必须且只有一个根元素
      template: '#fx',
      data() {
        return {
          username: '张三'
        }
      }
    }) */

    Vue.component('Fx', {
      // 字符串模板定义
      // 定义的组件必须且只有一个根元素
      template: `<div>
                <div>我也能换行</div>
                <h3>{{ username }}</h3>
                </div>`,
      // 定义数据源一定要以函数方式，且还需要返回一个对象         
      /* data(){
        return {
          username: '张三'
        }
      } */
      // es6中 如果返回是一个对象，可以用({}) 可以不用写return
      data:()=>({
        username: '张三'
      })
    })

    // 父组件
    new Vue({
      el: '#root',
      data: {

      }
    })
  </script>
</body>

</html>